<template>

	<div style="width: 500px;">
		<Tablefilter :filter="filterModel" :searchShow="false" @del="delTable()" @add="addTable()"></Tablefilter>
		<commonTable ref="commonTable" :getTableList="getTableList()" :refresh.sync="refresh" :filter="filter" :selectRow.sync="selectRow" :changeRow.sync="changeRow" :columns="columns">
		</commonTable>
		<!-- <domainEdit ref="domainEdit" :data="editData"
                   :refresh.sync="refresh"
                   :changeRow.sync="changeRow" ></domainEdit>-->
	</div>
</template>

<script>
	import Tablefilter from '../components/table/commonTableFilter'
	import commonTable from '../components/table/commonTable'
	/*import domainEdit from './domainEdit'*/

	export default {
		name: "domainList",
		components: {
			Tablefilter,
			/* domainEdit,*/
			commonTable
		},
		data() {
			return {
				domainTable: [],
				selectRow: [],
				domain: [],
				editData: {},
				filter: {},
				changeRow: {},
				refresh: false,
				columns: [{
						label: this.$t('common.domain'),
						prop: 'domain',
						render: this.render('domain')
					},
					{
						type: 'selection',
						width: 55
					},
					{
						label: this.$t('common.number'),
						prop: 'id',
						width: 70
					},
				],
				commentForm: {
					id: '',
				},

			}

		},
		methods: {
			addTable() {
				let domain = {
					'id': "",
					'domain':'',
				};
				this.$refs.commonTable.data.unshift(domain);
			
			},
			delTable() {
				var selrow = this.selectRow;
				var params = [];
				for(var i = 0; i < selrow.length; i++) {
					var item = selrow[i];
					var obj = {};
					if(item.id) {
						obj.id = item.id;
						//params.push(Object.assign(obj));
						params.push(obj);
					}
				}
				this.$domainDel(params).then(response => {
					if(response.code === 'success') {
//						this.$message.success(this.$t('common.delSuccess'))
						this.refresh = true
						this.selectRow = []
					} else {
//						this.$message.error(this.$t('common.delError'))
					}
				})
			},
			getTableList() {
				return this.$domainList;
			},
			render(prop) {
				let render = {}
				if(!prop) return;

				render.domain = (h, params) => {
					return h('div', [h('input', {
							class: {
								'domain-input': true
							},
							style: {
								display: 'block'
							},
							attrs:{
								readonly:"readonly"
							},
							domProps: {
								value: params.row.domain,
							},
							on: {
								blur: (e) => {
									this.changeDomain(e.target.value, e.target._value, params.row.id, e.target, e);
								},
								dblclick: function(e) {
									e.target.readOnly=''
								}
							}
						})/*,
						h('div', {
								class: {
									'domain-div': true
								},
								on: {
									dblclick: function(e) {
										e.target.style.display = 'none'
										e.target.previousSibling.style.display = 'block'
										e.target.previousSibling.focus()
									},
								},
							},
							params.row.domain
						)*/
					])
				}

				return render[prop]
			},
			changeDomain(value, old, id, target, e) {
				//debugger;
				if(value == old) {
					return
				}
				if(!value) {
					var params = [];
					var obj = {};
					if(id != "") {
						obj.id = id;
						params.push(obj);
					}
					this.$domainDel(params).then(response => {
						if(response.code === 'success') {
							this.$message.success(this.$t('common.delSuccess'))
							this.refresh = true
							this.selectRow = []
						} else {
							this.$message.error(this.$t('common.delError'))
						}
					})
				} else {
					var parmas = {
						domain: value
					}
					var tipStr = "";
					if(id != "") {
						parmas.id = id;
						tipStr = this.$t('common.editSuccess');
					} else {
						tipStr = this.$t('common.addSuccess');
					}
					this.$domainAdd([parmas]).then(response => {
						if(response.code && response.code === 'success') {
							this.$message.success(tipStr)
							this.refresh = true
							this.selectRow = [];
						} else {
							this.$message.error(response.msg)
							target.value = old
							//target.nextSibling.innerText = old
							target._value = old
						}
					})
				}
			},
		},
		mounted() {
			//this.domainAll()
			
		}
	}
</script>

<style lang="less">
	element.style {
		width: 41%;
	}
	
	.domain-input {
		border: none;
		max-width: 100%;
		width: 500px;
		line-height: 25px;
	}
	
	.domain-div {
		word-break: break-all;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		min-height: 22.5px;
		max-height: 100%;
	}
	
	.tableInfo {
		div {
			padding-right: 20px;
			display: inline-block;
		}
	}
	
	.error-row {
		background-color: #f56c6c !important;
	}
	
	.info-row {
		background-color: #409eff !important;
	}
	
	.success-row {
		background-color: #67c23a !important;
	}
	
	.striped-row {
		background-color: #FAFAFA !important;
	}
	
	body .el-table__fixed-right {
		top: 0.5px
	}
</style>